<template>
  <el-dialog title="提示" :visible.sync="show">
    <div>
      <el-form ref="ruleForm" :rules="rules" label-position="top" label-width="80px" :model="ruleForm">
        <el-form-item prop="school_id" label="院系">
          <el-select v-model="ruleForm.school_id">
            <el-option v-for="item in schoolList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="teacher_name" label="老师姓名">
          <el-input v-model="ruleForm.teacher_name" max="16" />
        </el-form-item>
        <el-form-item prop="number" label="工号">
          <el-input v-model="ruleForm.number" max="16" type="number" />
        </el-form-item>
        <el-form-item prop="age" label="年龄">
          <el-input v-model="ruleForm.age" max="16" type="number" />
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select v-model="ruleForm.sex">
            <el-option v-for="item in sexList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="birthday" label="生日">
          <el-date-picker v-model="ruleForm.birthday" value-format="yyyy-mm-dd" />
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item prop="phone" label="手机">
          <el-input v-model="ruleForm.phone" max="11" type="number" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="onAdd">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { http } from '@/api'

export default {
  name: 'PageAdd',
  data() {
    return {
      show: false,
      ruleForm: {
        teacher_name: '',
        sex: '',
        number: '',
        school_id: '',
        class_id: ''
      },
      rules: {
        teacher_name: [{ required: true, message: '不能为空' }],
        number: [{ required: true, message: '不能为空' }],
        school_id: [{ required: true, message: '不能为空' }],
        class_id: [{ required: true, message: '不能为空' }]
      },
      currentItem: {},
      sexList: [
        { id: '男', name: '男' },
        { id: '女', name: '女' }
      ]
    }
  },
  computed: {
    ...mapGetters(['schoolList', 'courseList', 'classList', 'userInfo'])
  },
  methods: {
    open() {
      for (const itemKey in this.ruleForm) {
        this.ruleForm[itemKey] = this.userInfo[itemKey]
      }
      this.show = true
    },
    onAdd() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          http.teacher.update(this.userInfo.id, this.ruleForm).then(res => {
            this.show = false
            this.$store.commit('user/SET_USERINFO', {
              ...this.userInfo,
              ...this.ruleForm
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
